import { ElMessage } from 'element-plus'
let helpTooltipElement //帮助提示框元素
let helpTooltip
let measureTooltipElement // 测量提示元素
let measureTooltip //测量值
let draw

// 点击事件
const handleMeasure = (map, source, key) => {
  let type
  if (key == 'length') {
    type = 'LineString'
  } else if (key == 'area') {
    type = 'Polygon'
  } else if (key == 'close') {
    source.clear()
    map.getOverlays().clear()
    map.removeInteraction(draw)
    return
  } else if ((key = 'photo')) {
    map.once('postcompose', function (event) {
      var canvas = event.context.canvas
      canvas.toBlob(function (blob) {
        saveAs(blob, 'map.png')
      })
    })
    map.renderSync()
    map.removeInteraction(draw)
    return
  }

  // 先移除上一次的画笔
  map.removeInteraction(draw)
  draw = new ol.interaction.Draw({
    source: source, //测量绘制层数据源
    type: type, //几何图形类型
  })
  map.addInteraction(draw)

  let listener
  let sketch //当前要素
  // 开始绘制的事件
  draw.on('drawstart', (evt) => {
    // set sketch
    sketch = evt.feature //绘制的要素

    var tooltipCoord = evt.coordinate // 绘制的坐标
    //绑定change事件，根据绘制几何类型得到测量长度值或面积值，并将其设置到测量工具提示框中显示
    listener = sketch.getGeometry().on('change', (evt) => {
      var geom = evt.target //绘制几何要素
      var output
      if (geom instanceof ol.geom.Polygon) {
        output = formatArea(map, geom) //面积值
        tooltipCoord = geom.getInteriorPoint().getCoordinates() //坐标
      } else if (geom instanceof ol.geom.LineString) {
        output = formatLength(map, geom) //长度值
        tooltipCoord = geom.getLastCoordinate() //坐标
      }
      measureTooltipElement.innerHTML = output //将测量值设置到测量工具提示框中显示
      measureTooltip.setPosition(tooltipCoord) //设置测量工具提示框的显示位置
    })
  })
  // 结束绘制的事件
  draw.on('drawend', () => {
    measureTooltipElement.className = 'tooltip tooltip-static' //设置测量提示框的样式
    measureTooltip.setOffset([0, -7])
    // unset sketch
    sketch = null //置空当前绘制的要素对象
    // unset tooltip so that a new one can be created
    measureTooltipElement = null //置空测量工具提示框对象
    createMeasureTooltip(map) //重新创建一个测试工具提示框显示结果
    ol.Observable.unByKey(listener)

    ElMessage({
      message: '绘制成功!',
      type: 'success',
    })
  })

  createMeasureTooltip(map) //创建测量工具提示框
  createHelpTooltip(map) //创建帮助提示框
}

const createHelpTooltip = (map) => {
  if (helpTooltipElement) {
    helpTooltipElement.parentNode.removeChild(helpTooltipElement)
  }
  helpTooltipElement = document.createElement('div')
  helpTooltipElement.className = 'tooltip hidden'
  helpTooltip = new ol.Overlay({
    element: helpTooltipElement,
    offset: [15, 0],
    positioning: 'center-left'
  })
  map.addOverlay(helpTooltip)
}

const createMeasureTooltip = (map) => {
  if (measureTooltipElement) {
    measureTooltipElement.parentNode.removeChild(measureTooltipElement)
  }
  measureTooltipElement = document.createElement('div')
  measureTooltipElement.className = 'tooltip tooltip-measure'
  measureTooltip = new ol.Overlay({
    element: measureTooltipElement,
    offset: [0, -15],
    positioning: 'bottom-center'
  })
  map.addOverlay(measureTooltip)
}

const formatLength = (map, line) => {
  var length
  var sphere = new ol.Sphere()
  if (true) {
    //若使用测地学方法测量
    var sourceProj = map.getView().getProjection() //地图数据源投影坐标系
    length = sphere.getLength(line, {
      projection: sourceProj,
      radius: 6378137
    })
  }
  var output
  if (length > 100) {
    output = Math.round((length / 1000) * 100) / 100 + ' ' + 'km' //换算成KM单位
  } else {
    output = Math.round(length * 100) / 100 + ' ' + 'm' //m为单位
  }
  return output //返回线的长度
}

const formatArea = (map, polygon) => {
  var area
  var sphere = new ol.Sphere()
  if (true) {
    //若使用测地学方法测量
    var sourceProj = map.getView().getProjection() //地图数据源投影坐标系
    var geom = /** @type {ol.geom.Polygon} */ (
      polygon.clone().transform(sourceProj, 'EPSG:4326')
    ) //将多边形要素坐标系投影为EPSG:4326
    area = Math.abs(
      sphere.getArea(geom, { projection: sourceProj, radius: 6378137 })
    ) //获取面积
  }
  var output
  if (area > 10000) {
    output = Math.round((area / 1000000) * 100) / 100 + ' ' + 'km<sup>2</sup>' //换算成KM单位
  } else {
    output = Math.round(area * 100) / 100 + ' ' + 'm<sup>2</sup>' //m为单位
  }
  return output //返回多边形的面积
}

export { handleMeasure }